<template>
	<view>
		<view class="tab-list">
			<u-tabs active-color="#de1f1c" :is-scroll="true" :bar-style="{borderRadius:'10rpx'}" :gutter="14" :height="70" :list="tab" :current="current" @change="change"></u-tabs>
		</view>
		<view class="list">
			<view class="item u-flex" v-for="item in lists[current]" @click="jump(`/pages/news/detail?id=${item.id}`)" :key="item.id">
				<view class="info u-flex-1">
					<view class="title">{{item.title}}</view>
					<view class="date">{{item.createtime}}</view>
				</view>
				<view class="image">
					<u-image width="280rpx" height="166rpx" :src="imgUrl(item.image)"></u-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:'',
				current: 0,
				tabPage:[0],
				lists:'',
				p:'',
				status:''
			}
		},
		methods: {
			change(index) {
				this.current = index
				if(this.tabPage.indexOf(index) === -1){
					this.tabPage.push(index)
					this.getList()
				}
			},
			getType(){
				this.$u.api.newsType().then(res=>{
					this.tab = res
					if(!res.length) return
					// 初始化数据
					let lists = {},p = {},status = {}
					res.forEach((item,index)=>{
						lists[index] = {}
						p[index] = 1
						status[index] = 'loading'
					})
					this.lists = lists
					this.p = p
					this.status = status
					this.getList()
				})
			},
			getList(indexs){
				const index = indexs === undefined ? this.current : indexs
				this.status[index] = 'loading'
				this.$u.api.newsList({
					p:this.p[index],
					news_type_id:this.tab[index].id
				}).then(res=>{
					this.lists[index] = this.p[index] == 1 ? res : this.lists[index].concat(res)
					this.status[index] = res.length  === 20 ? 'loadmore' : 'nomore'
					uni.stopPullDownRefresh()
				})
			}
		},
		onLoad() {
			this.getType()
		},
		onReachBottom() {
			const index = this.current
			if(this.status[index] == 'loadmore'){
				this.p[index] ++
				this.getList()
			}
		},
		onPullDownRefresh() {
			const index = this.current
			this.p[index] = 1
			this.getList(index)
		}
	}
</script>

<style lang="scss">
	.tab-list{border-bottom: 1rpx solid #eee;position: sticky;top: 0;left: 0;width: 100%;background-color: #fff;z-index: 9;}
	
	.list{
		padding: 20rpx 50rpx;
		.item{
			border-bottom: 1rpx solid #ececec;
			padding: 24rpx 0;
			.image{
				margin-left: 20rpx;
			}
			.info{
				.title{font-size: 32rpx;font-weight: bold;
					line-height: 40rpx;
				  height: 120rpx;
				  overflow: hidden;
				  display: -webkit-box;
				  -webkit-line-clamp: 3;
				  -webkit-box-orient: vertical
				}
				.date{font-size: 26rpx;color: #666;margin-top: 4rpx;}
			}
		}
	}
</style>
